<template>
    <div :id="TABLE_KEY">
        <div id="table-header" class="flex-between pb-3">
            <slot name="table-left-nav"></slot>
            <slot name="table-right-nav"></slot>
        </div>
        <a-table v-bind="getBindValues">
            <template #headerCell="{ column, record }">
                <slot :name="`header-${column.headerCell}`" :column="column" :record="record"></slot>
            </template>

            <template #bodyCell="{ column, record }">
                <slot :name="`column-${column.bodyCell}`" :column="column" :record="record"></slot>
            </template>
        </a-table>
    </div>
</template>

<script setup lang="ts">
import { useColumns } from './hook/useColumns';
import { useTableSize } from './hook/useTableSize';
import { CustomTableProps } from './types';

const attrs = useAttrs()
const emit = defineEmits(['change'])
const props = withDefaults(defineProps<CustomTableProps>(), {
    showHeader: true
})
const innerPropsRef = ref()
const getProps = computed(() => {
    return { ...props, ...unref(innerPropsRef) }
})

const setProps = (props: Partial<CustomTableProps>) => {
    innerPropsRef.value = { ...unref(innerPropsRef), ...props }
}

// provide('getProps', getProps)
// provide('setProps', setProps)


const getDataSource = computed(() => {
    return props.dataSource || []
})

const TABLE_KEY = computed(() => {
    return props.tableKey || 'tableKey'
})

const { getColumns } = useColumns(getProps)
// const {scrollConfig} = useTableSize(getProps,TABLE_KEY)

const selection = computed(() => {
    if (!props.selection) return null
    let rowSelection  = {
        fixed: true,
        onChange: (selectedRowKeys: any, selectedRows: any) => {
            emit('change',selectedRowKeys,selectedRows)
        },
    }
    return rowSelection
})


const getBindValues = computed(() => {
    return {
        ...attrs,
        bordered: true,
        rowKey: (record: any) => record.name,
        size: 'large',
        rowSelection:unref(selection),
        // scroll: unref(scrollConfig),
        columns: unref(getColumns),
        dataSource: unref(getDataSource),
    }
})

</script>

<style scoped lang="scss">
:deep(.ant-pagination) {
    margin: 0px !important;
    padding-top: 12px;
}
</style>